 <template>
  <div class="action-library">
    <!-- 主要内容区域 -->
    <div class="library-main">
      <!-- 左侧分类导航 -->
      <div class="sidebar-nav">
        <div class="nav-section">
          <h2 class="nav-title">训练部位</h2>
          <div class="nav-items">
            <div
                v-for="part in bodyParts"
                :key="part"
                class="nav-item"
                :class="{ active: selectedBodyPart === part }"
                @click="selectBodyPart(part)"
            >
              <!-- 使用 Element Plus 图标 -->
              <el-icon v-if="part === '腿部'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C13.1 2 14 2.9 14 4V20C14 21.1 13.1 22 12 22S10 21.1 10 20V4C10 2.9 10.9 2 12 2ZM8 4C9.1 4 10 4.9 10 6V18C10 19.1 9.1 20 8 20S6 19.1 6 18V6C6 4.9 6.9 4 8 4ZM16 4C17.1 4 18 4.9 18 6V18C18 19.1 17.1 20 16 20S14 19.1 14 18V6C14 4.9 14.9 4 16 4Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="part === '背部'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 5C18.9 5 18 5.9 18 7V17C18 18.1 18.9 19 20 19C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5ZM4 7C4 5.9 4.9 5 6 5C7.1 5 8 5.9 8 7V17C8 18.1 7.1 19 6 19C4.9 19 4 18.1 4 17V7ZM12 6C10.9 6 10 6.9 10 8V16C10 17.1 10.9 18 12 18S14 17.1 14 16V8C14 6.9 13.1 6 12 6Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="part === '胸部'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4C14.2 4 16 5.8 16 8C16 10.2 14.2 12 12 12C9.8 12 8 10.2 8 8C8 5.8 9.8 4 12 4ZM12 2C8.7 2 6 4.7 6 8C6 11.3 8.7 14 12 14C15.3 14 18 11.3 18 8C18 4.7 15.3 2 12 2ZM12 16C7.6 16 4 19.6 4 24H6C6 19.6 9.6 16 12 16ZM12 16C16.4 16 20 19.6 20 24H22C22 19.6 18.4 16 12 16Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="part === '肩部'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 11H15V13H9V11ZM9 7H15V9H9V7ZM9 15H13V17H9V15ZM12 2C8.1 2 5 5.1 5 9V15C5 16.1 5.9 17 7 17H17C18.1 17 19 16.1 19 15V9C19 5.1 15.9 2 12 2ZM17 15H7V9C7 6.2 9.2 4 12 4C14.8 4 17 6.2 17 9V15Z" fill="currentColor"/></svg></el-icon>
              {{ part }}
            </div>
          </div>
        </div>

        <div class="nav-section">
          <h2 class="nav-title">训练目标</h2>
          <div class="nav-items">
            <div
                v-for="goal in trainingGoals"
                :key="goal"
                class="nav-item"
                :class="{ active: selectedGoal === goal }"
                @click="selectGoal(goal)"
            >
              <!-- 使用 Element Plus 图标 -->
              <el-icon v-if="goal === '增肌'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2H11V11H2V13H11V22H13V13H22V11H13V2Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="goal === '塑形'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L8 6H11V14H13V6H16L12 2ZM18 10V22H20V10H18ZM4 10V22H6V10H4Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="goal === '燃脂'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13.76 3.29 13.5 3.5 13.39 3.5C13.15 3.5 12.93 3.42 12.95 3.23C12.96 2.81 13.18 2.5 13.5 2.25C13.08 2.77 12.55 3.25 12 3.5C11.45 3.25 10.92 2.77 10.5 2.25C10.82 2.5 11.04 2.81 11.05 3.23C11.07 3.42 10.85 3.5 10.61 3.5C10.5 3.5 10.24 3.29 10.05 3C11 4.85 10.67 7.26 9.18 8.72C8.54 9.35 7.78 9.78 7.11 10.38C6.85 10.64 6.57 10.9 6.34 11.2C4.78 13.74 5.75 17.21 8 18.5C9.06 19.1 10 19.41 11 19.43V19.5C11 20.33 11.67 21 12.5 21C13.33 21 14 20.33 14 19.5V19.43C15 19.41 15.94 19.1 17 18.5C19.25 17.21 20.22 13.74 18.66 11.2H17.66ZM9.76 15.62C9.28 15.13 9 14.5 9 13.8C9 12.5 10.2 11.5 11.5 11.5S14 12.5 14 13.8C14 14.5 13.72 15.13 13.24 15.62C12.76 16.1 12.13 16.4 11.5 16.4S10.24 16.1 9.76 15.62Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="goal === '放松'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20ZM16.5 9C17.3 9 18 8.3 18 7.5S17.3 6 16.5 6S15 6.7 15 7.5S15.7 9 16.5 9ZM7.5 9C8.3 9 9 8.3 9 7.5S8.3 6 7.5 6S6 6.7 6 7.5S6.7 9 7.5 9ZM12 17C13.5 17 15 16.2 15.8 15H8.2C9 16.2 10.5 17 12 17Z" fill="currentColor"/></svg></el-icon>
              {{ goal }}
            </div>
          </div>
        </div>

        <div class="nav-section">
          <h2 class="nav-title">训练器械</h2>
          <div class="nav-items">
            <div
                v-for="equipment in equipments"
                :key="equipment"
                class="nav-item"
                :class="{ active: selectedEquipment === equipment }"
                @click="selectEquipment(equipment)"
            >
              <!-- 使用 Element Plus 图标 -->
              <el-icon v-if="equipment === '无器械'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20ZM12 17C13.5 17 15 16.2 15.8 15H8.2C9 16.2 10.5 17 12 17Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="equipment === '有器械'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H4C2.9 6 2 6.9 2 8V16C2 17.1 2.9 18 4 18H20C21.1 18 22 17.1 22 16V8C22 6.9 21.1 6 20 6ZM20 16H4V8H20V16ZM16 10H8V12H16V10Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="equipment === '哑铃'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 7H17V5C17 3.9 16.1 3 15 3H9C7.9 3 7 3.9 7 5V7H5C3.9 7 3 7.9 3 9V15C3 16.1 3.9 17 5 17H7V19C7 20.1 7.9 21 9 21H15C16.1 21 17 20.1 17 19V17H19C20.1 17 21 16.1 21 15V9C21 7.9 20.1 7 19 7ZM9 5H15V7H9V5ZM19 15H17V9H19V15ZM15 19H9V17H15V19ZM15 15H9V9H15V15ZM7 15H5V9H7V15Z" fill="currentColor"/></svg></el-icon>
              <el-icon v-else-if="equipment === '杠铃'" class="nav-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H4C2.9 6 2 6.9 2 8V16C2 17.1 2.9 18 4 18H20C21.1 18 22 17.1 22 16V8C22 6.9 21.1 6 20 6ZM20 16H4V8H20V16ZM8 10H6V14H8V10ZM18 10H16V14H18V10Z" fill="currentColor"/></svg></el-icon>
              {{ equipment }}
            </div>
          </div>
        </div>
      </div>

      <!-- 中间内容区域 -->
      <div class="main-content">
        <!-- 动作展示区域 -->
        <div class="actions-section">
          <div class="section-header">
            <h1 class="banner-title">动作库</h1>
            <div class="search-container">
              <el-input
                  v-model="searchKeyword"
                  placeholder="搜索动作..."
                  class="action-search"
                  clearable
                  @keyup.enter="searchActions"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" class="search-button" @click="searchActions">
                搜索
              </el-button>
            </div>
            <div class="action-count">共 {{ filteredActions.length }} 个动作</div>
          </div>

          <!-- 动作网格视图 -->
          <div class="actions-grid">
            <div
                v-for="action in displayedActionsPage"
                :key="action.id"
                class="action-card"
            >
              <div class="card-video">
                <el-image
                    :src="action.image"
                    alt="action video"
                    class="action-video"
                    lazy
                    fit="cover"
                >
                  <template #placeholder>
                    <div class="image-slot">
                      <el-icon class="loading-icon"><VideoPlay /></el-icon>
                    </div>
                  </template>
                  <template #error>
                    <div class="image-slot">
                      <el-icon class="error-icon"><VideoPlay /></el-icon>
                    </div>
                  </template>
                </el-image>
              </div>

              <div class="card-content">
                <h3 class="action-name">{{ action.name }}</h3>
                <div class="action-tags">
                  <el-tag
                      v-for="tag in action.tags"
                      :key="tag"
                      class="action-tag"
                      type="success"
                      effect="plain"
                  >
                    {{ tag }}
                  </el-tag>
                </div>

                <div class="card-actions">
                  <el-button
                      type="primary"
                      @click="viewActionDetail(action)"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 分页组件 -->
          <div class="pagination-container">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[6, 9, 12, 18]"
                :small="false"
                :disabled="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="filteredActions.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
      
      <!-- 右侧动作详情侧边栏 -->
      <div v-if="selectedAction" class="action-detail-sidebar">
        <div class="sidebar-content">
          <div class="sidebar-header">
            <h2>{{ selectedAction.name }}</h2>
            <el-button class="close-btn" @click="closeActionDetail" circle>
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
          
          <div class="sidebar-body">
            <!-- 目标肌群 -->
            <div class="detail-section">
              <h3>目标肌群</h3>
              <div class="muscle-group">
                <p>{{ getMuscleGroupText(selectedAction.tags) }}</p>
                <div class="muscle-image-placeholder">
                  <el-image
                      :src="selectedAction.image"
                      alt="muscle group"
                      class="muscle-image"
                      fit="cover"
                  >
                    <template #placeholder>
                      <div class="image-slot">
                        <el-icon class="loading-icon"><Picture /></el-icon>
                      </div>
                    </template>
                    <template #error>
                      <div class="image-slot">
                        <el-icon class="error-icon"><Picture /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </div>
            </div>
            
            <!-- 动作要领 -->
            <div class="detail-section">
              <h3>动作要领</h3>
              <div class="instruction-content">
                <p>{{ getActionInstructionsText(selectedAction.name) }}</p>
              </div>
            </div>

            <!-- 注意事项 -->
            <div class="detail-section">
              <h3>注意事项</h3>
              <div class="precautions-content">
                <p>{{ getActionPrecautionsText(selectedAction.name) }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElIcon } from 'element-plus'
import { Search, VideoPlay, Close, Picture } from '@element-plus/icons-vue'

// 搜索关键词
const searchKeyword = ref('')

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(9)

// 选中的分类
const selectedBodyPart = ref('')
const selectedGoal = ref('')
const selectedEquipment = ref('')

// 选中的动作详情
const selectedAction = ref(null)

// 训练部位
const bodyParts = ref(['腿部', '背部', '胸部', '肩部'])

// 训练目标
const trainingGoals = ref(['增肌', '塑形', '燃脂', '放松'])

// 训练器械
const equipments = ref(['无器械', '有器械', '哑铃', '杠铃'])

// 动作数据
const actions = ref([
  {
    id: 1,
    name: '深蹲',
    tags: ['腿部', '增肌', '无器械'],
    image: '/src/assets/深蹲.jpg'
  },
  {
    id: 2,
    name: '俯卧撑',
    tags: ['胸部', '增肌', '无器械'],
    image: '/src/assets/俯卧撑.jpg'
  },
  {
    id: 3,
    name: '引体向上',
    tags: ['背部', '增肌', '有器械'],
    image: '/src/assets/引体向上.jpg'
  },
  {
    id: 4,
    name: '哑铃推举',
    tags: ['肩部', '塑形', '哑铃'],
    image: '/src/assets/哑铃推举.jpg'
  },
  {
    id: 5,
    name: '硬拉',
    tags: ['背部', '增肌', '杠铃'],
    image: '/src/assets/硬拉.jpg'
  },
  {
    id: 6,
    name: '卷腹',
    tags: ['腹部', '塑形', '无器械'],
    image: '/src/assets/卷腹.jpg'
  },
  {
    id: 7,
    name: '平板支撑',
    tags: ['腹部', '塑形', '无器械'],
    image: '/src/assets/平板支撑.jpg'
  },
  {
    id: 8,
    name: '二头弯举',
    tags: ['手臂', '塑形', '哑铃'],
    image: '/src/assets/二头弯举.jpg'
  },
  {
    id: 9,
    name: '三头肌伸展',
    tags: ['手臂', '塑形', '哑铃'],
    image: '/src/assets/三头肌.jpg'
  },
  {
    id: 10,
    name: '臀桥',
    tags: ['臀部', '塑形', '无器械'],
    image: '/src/assets/臀桥.jpg'
  },
  {
    id: 11,
    name: '高抬腿',
    tags: ['腿部', '燃脂', '无器械'],
    image: '/src/assets/高抬腿.jpg'
  },
  {
    id: 12,
    name: '开合跳',
    tags: ['全身', '燃脂', '无器械'],
    image: '/src/assets/开合跳.jpg'
  },
  // 为腿部增加动作
  {
    id: 13,
    name: '弓步蹲',
    tags: ['腿部', '塑形', '无器械'],
    image: '/src/assets/弓步蹲.jpg'
  },
  {
    id: 14,
    name: '腿举',
    tags: ['腿部', '增肌', '有器械'],
    image: '/src/assets/腿举.jpg'
  },
  {
    id: 15,
    name: '腿弯举',
    tags: ['腿部', '塑形', '有器械'],
    image: '/src/assets/腿弯举.jpg'
  },
  {
    id: 16,
    name: '保加利亚分腿蹲',
    tags: ['腿部', '增肌', '哑铃'],
    image: '/src/assets/保加利亚分腿蹲.jpg'
  },
  // 为背部增加动作
  {
    id: 17,
    name: '坐姿划船',
    tags: ['背部', '塑形', '有器械'],
    image: '/src/assets/坐姿划船.jpg'
  },
  {
    id: 18,
    name: '杠铃划船',
    tags: ['背部', '增肌', '杠铃'],
    image: '/src/assets/杠铃划船.jpg'
  },
  {
    id: 19,
    name: '哑铃划船',
    tags: ['背部', '增肌', '哑铃'],
    image: '/src/assets/哑铃划船.jpg'
  },
  // 为胸部增加动作
  {
    id: 20,
    name: '哑铃飞鸟',
    tags: ['胸部', '塑形', '哑铃'],
    image: '/src/assets/哑铃飞鸟.jpg'
  },
  {
    id: 21,
    name: '杠铃卧推',
    tags: ['胸部', '增肌', '杠铃'],
    image: '/src/assets/杠铃卧推.jpg'
  },
  {
    id: 22,
    name: '上斜哑铃卧推',
    tags: ['胸部', '增肌', '哑铃'],
    image: '/src/assets/上斜哑铃卧推.jpg'
  },
  // 为肩部增加动作
  {
    id: 23,
    name: '侧平举',
    tags: ['肩部', '塑形', '哑铃'],
    image: '/src/assets/侧平举.jpg'
  },
  {
    id: 24,
    name: '推举',
    tags: ['肩部', '增肌', '杠铃'],
    image: '/src/assets/推举.jpg'
  },
  {
    id: 25,
    name: '前平举',
    tags: ['肩部', '塑形', '哑铃'],
    image: '/src/assets/前平举.jpg'
  },
  // 为手臂增加动作
  {
    id: 26,
    name: '锤式弯举',
    tags: ['手臂', '塑形', '哑铃'],
    image: '/src/assets/锤式弯举.jpg'
  },
  {
    id: 27,
    name: '颈后臂屈伸',
    tags: ['手臂', '塑形', '哑铃'],
    image: '/src/assets/颈后臂屈伸.jpg'
  },
  // 为腹部增加动作
  {
    id: 28,
    name: '俄罗斯转体',
    tags: ['腹部', '塑形', '无器械'],
    image: '/src/assets/俄罗斯转体.jpg'
  },
  {
    id: 29,
    name: '仰卧举腿',
    tags: ['腹部', '塑形', '无器械'],
    image: '/src/assets/仰卧举腿.jpg'
  },
  // 为臀部增加动作
  {
    id: 30,
    name: '蚌式开合',
    tags: ['臀部', '塑形', '无器械'],
    image: '/src/assets/蚌式开合.jpg'
  },
  {
    id: 31,
    name: '单腿臀桥',
    tags: ['臀部', '塑形', '无器械'],
    image: '/src/assets/单腿臀桥.jpg'
  },
  // 为全身增加动作
  {
    id: 32,
    name: '波比跳',
    tags: ['全身', '燃脂', '无器械'],
    image: '/src/assets/波比跳.jpg'
  },
  {
    id: 33,
    name: '登山者',
    tags: ['全身', '燃脂', '无器械'],
    image: '/src/assets/登山者.jpg'
  },
  // 为增肌目标增加动作
  {
    id: 34,
    name: '负重深蹲',
    tags: ['腿部', '增肌', '杠铃'],
    image: '/src/assets/负重深蹲.jpg'
  },
  {
    id: 35,
    name: '负重引体向上',
    tags: ['背部', '增肌', '有器械'],
    image: '/src/assets/负重引体向上.jpg'
  },
  // 为塑形目标增加动作
  {
    id: 36,
    name: '侧卧抬腿',
    tags: ['臀部', '塑形', '无器械'],
    image: '/src/assets/侧卧抬腿.jpg'
  },
  {
    id: 37,
    name: '直腿硬拉',
    tags: ['背部', '塑形', '哑铃'],
    image: '/src/assets/直腿硬拉.jpg'
  },
  // 为燃脂目标增加动作
  {
    id: 38,
    name: '跳绳',
    tags: ['全身', '燃脂', '有器械'],
    image: '/src/assets/跳绳.jpg'
  },
  {
    id: 39,
    name: '波比跳',
    tags: ['全身', '燃脂', '无器械'],
    image: '/src/assets/波比跳.jpg'
  },
  // 为放松目标增加动作
  {
    id: 40,
    name: '猫牛式伸展',
    tags: ['全身', '放松', '无器械'],
    image: '/src/assets/猫牛式伸展.jpg'
  },
  {
    id: 41,
    name: '下犬式',
    tags: ['全身', '放松', '无器械'],
    image: '/src/assets/下犬式.jpg'
  },
  // 为放松类别增加更多动作
  {
    id: 47,
    name: '婴儿式',
    tags: ['全身', '放松', '无器械'],
    image: '/src/assets/婴儿式.jpg'
  },
  {
    id: 48,
    name: '仰卧扭转',
    tags: ['腰部', '放松', '无器械'],
    image: '/src/assets/仰卧扭转.jpg'
  },
  {
    id: 49,
    name: '鸽子式',
    tags: ['臀部', '放松', '无器械'],
    image: '/src/assets/鸽子式.jpg'
  },
  {
    id: 50,
    name: '肩部拉伸',
    tags: ['肩部', '放松', '无器械'],
    image: '/src/assets/肩部拉伸.jpg'
  },
  {
    id: 51,
    name: '颈部拉伸',
    tags: ['颈部', '放松', '无器械'],
    image: '/src/assets/颈部拉伸.jpg'
  },
  {
    id: 52,
    name: '脊柱波浪式',
    tags: ['全身', '放松', '无器械'],
    image: '/src/assets/脊柱波浪式.jpg'
  },
  // 为无器械增加动作
  {
    id: 42,
    name: '靠墙静蹲',
    tags: ['腿部', '塑形', '无器械'],
    image: '/src/assets/靠墙静蹲.jpg'
  },
  // 为有器械增加动作
  {
    id: 43,
    name: '坐姿推胸',
    tags: ['胸部', '增肌', '有器械'],
    image: '/src/assets/坐姿推胸.jpg'
  },
  {
    id: 44,
    name: '器械划船',
    tags: ['背部', '塑形', '有器械'],
    image: '/src/assets/器械划船.jpg'
  },
  // 为哑铃增加动作
  {
    id: 45,
    name: '哑铃深蹲',
    tags: ['腿部', '塑形', '哑铃'],
    image: '/src/assets/哑铃深蹲.jpg'
  },
  // 为杠铃增加动作
  {
    id: 46,
    name: '杠铃深蹲',
    tags: ['腿部', '增肌', '杠铃'],
    image: '/src/assets/杠铃深蹲.jpg'
  }
])

// 计算属性
// 过滤后的动作
const filteredActions = computed(() => {
  let filtered = actions.value

  // 根据搜索关键词过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(action =>
        action.name.toLowerCase().includes(keyword) ||
        action.tags.some(tag => tag.toLowerCase().includes(keyword))
    )
  }

  // 根据训练部位过滤
  if (selectedBodyPart.value) {
    filtered = filtered.filter(action =>
        action.tags.includes(selectedBodyPart.value)
    )
  }

  // 根据训练目标过滤
  if (selectedGoal.value) {
    filtered = filtered.filter(action =>
        action.tags.includes(selectedGoal.value)
    )
  }

  // 根据训练器械过滤
  if (selectedEquipment.value) {
    filtered = filtered.filter(action =>
        action.tags.includes(selectedEquipment.value)
    )
  }

  return filtered
})

// 当前页显示的动作
const displayedActionsPage = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredActions.value.slice(start, end)
})

// 方法
// 搜索动作
const searchActions = () => {
  currentPage.value = 1
}

// 选择训练部位
const selectBodyPart = (part) => {
  selectedBodyPart.value = selectedBodyPart.value === part ? '' : part
  currentPage.value = 1
}

// 选择训练目标
const selectGoal = (goal) => {
  selectedGoal.value = selectedGoal.value === goal ? '' : goal
  currentPage.value = 1
}

// 选择训练器械
const selectEquipment = (equipment) => {
  selectedEquipment.value = selectedEquipment.value === equipment ? '' : equipment
  currentPage.value = 1
}

// 查看动作详情
const viewActionDetail = (action) => {
  selectedAction.value = action
}

// 关闭动作详情
const closeActionDetail = () => {
  selectedAction.value = null
}

// 获取目标肌群文本
const getMuscleGroupText = (tags) => {
  const bodyParts = ['腿部', '背部', '胸部', '肩部', '手臂', '腹部', '臀部', '全身']
  const muscleGroups = tags.filter(tag => bodyParts.includes(tag))
  return muscleGroups.length > 0 ? muscleGroups.join(', ') : '全身'
}

// 获取动作要领
const getActionInstructions = (actionName) => {
  const instructions = {
    '深蹲': [
      '双脚与肩同宽站立，脚尖略微向外',
      '保持背部挺直，核心收紧',
      '屈膝下蹲，臀部向后坐，膝盖不要超过脚尖',
      '下蹲至大腿与地面平行',
      '用力推地站起，回到起始位置'
    ],
    '俯卧撑': [
      '面朝下，双手放在肩膀下方，双脚并拢',
      '保持身体从头到脚呈一条直线',
      '弯曲手肘，身体下降至胸部接近地面',
      '推起身体回到起始位置',
      '保持核心收紧，避免塌腰或翘臀'
    ],
    '引体向上': [
      '双手握住单杠，手掌朝外，略宽于肩',
      '悬挂在单杠上，双臂伸直，身体保持稳定',
      '用背部和手臂的力量将身体向上拉',
      '下巴超过单杠，稍作停顿',
      '缓慢下降至起始位置'
    ],
    '哑铃推举': [
      '坐在椅子上，双脚平放地面',
      '双手各持一个哑铃，手肘弯曲，哑铃位于肩膀高度',
      '向上推举哑铃，直到手臂完全伸直',
      '在顶部稍作停顿',
      '缓慢弯曲手肘，将哑铃放回肩膀高度'
    ],
    '硬拉': [
      '双脚与肩同宽站立，杠铃贴近小腿',
      '屈膝下蹲，双手握住杠铃',
      '保持背部挺直，用腿部和臀部力量站起',
      '将杠铃沿小腿上拉至大腿',
      '在顶部稍作停顿，然后缓慢放下'
    ],
    '卷腹': [
      '仰卧在地，双膝弯曲，双脚平放',
      '双手轻放在耳朵两侧，不要用力拉头部',
      '用腹部力量将肩膀抬离地面',
      '在顶部稍作停顿',
      '缓慢放下肩膀回到起始位置'
    ],
    '平板支撑': [
      '面朝下，双肘弯曲支撑在地面上',
      '双脚并拢，脚尖着地',
      '保持身体从头到脚呈一条直线',
      '收紧核心和臀部肌肉',
      '保持这个姿势，避免臀部下沉或抬高'
    ],
    '二头弯举': [
      '站立，双脚与肩同宽，双手各持一个哑铃',
      '手臂自然下垂，掌心朝前',
      '弯曲手肘，将哑铃举至肩膀高度',
      '在顶部稍作停顿',
      '缓慢放下哑铃回到起始位置'
    ],
    '三头肌伸展': [
      '坐在椅子上，一只手握住哑铃',
      '将哑铃举过头顶，手肘弯曲',
      '保持上臂不动，伸展前臂向上',
      '在顶部稍作停顿',
      '缓慢弯曲手肘回到起始位置'
    ],
    '臀桥': [
      '仰卧在地，双膝弯曲，双脚平放',
      '双手放在身体两侧',
      '收紧臀部和核心肌肉',
      '将臀部抬离地面，直到身体从肩膀到膝盖呈一条直线',
      '在顶部稍作停顿',
      '缓慢放下臀部回到起始位置'
    ],
    '高抬腿': [
      '站立，双脚与肩同宽',
      '快速交替抬起膝盖至腰部高度',
      '保持上身挺直，核心收紧',
      '手臂自然摆动配合腿部动作',
      '持续进行动作'
    ],
    '开合跳': [
      '站立，双脚并拢，双手放在身体两侧',
      '跳跃时双脚分开，同时双手举过头顶拍手',
      '再次跳跃时双脚并拢，双手回到身体两侧',
      '保持节奏连续进行',
      '落地时膝盖微屈以缓冲'
    ]
  }
  
  return instructions[actionName] || ['请根据动作特点进行练习']
}

// 获取注意事项
const getActionPrecautions = (actionName) => {
  const precautions = {
    '深蹲': [
      '膝盖不要内扣，保持与脚尖方向一致',
      '下蹲时保持背部挺直，避免弓背',
      '控制下蹲速度，避免过快',
      '初学者可以先从徒手深蹲开始'
    ],
    '俯卧撑': [
      '避免塌腰或翘臀，保持身体直线',
      '手肘不要完全锁死，保持微屈',
      '控制动作节奏，避免过快',
      '如果标准俯卧撑有困难，可以从膝盖俯卧撑开始'
    ],
    '引体向上': [
      '避免借力摆动身体',
      '动作过程中保持身体稳定',
      '如果无法完成标准引体向上，可以使用辅助器械',
      '控制下降速度，避免过快'
    ],
    '哑铃推举': [
      '避免使用过重的哑铃导致动作变形',
      '保持背部贴紧椅背',
      '控制动作节奏，避免过快',
      '呼吸要均匀，用力时呼气'
    ],
    '硬拉': [
      '始终保持背部挺直，避免弓背',
      '动作过程中杠铃贴近身体',
      '避免使用过重重量导致动作变形',
      '注意保护腰部，避免受伤'
    ],
    '卷腹': [
      '避免用手拉头部，以免颈部受伤',
      '动作过程中下背部保持贴地',
      '控制动作节奏，避免过快',
      '呼吸要均匀，用力时呼气'
    ],
    '平板支撑': [
      '避免臀部下沉或抬高',
      '保持颈部自然位置，不要过度仰头或低头',
      '如果标准平板支撑有困难，可以从膝盖平板支撑开始',
      '避免憋气，保持正常呼吸'
    ],
    '二头弯举': [
      '避免借力摆动身体',
      '控制动作节奏，避免过快',
      '避免使用过重的哑铃导致动作变形',
      '保持肘部固定，不要前后移动'
    ],
    '三头肌伸展': [
      '保持上臂固定，不要前后移动',
      '控制动作节奏，避免过快',
      '避免使用过重的哑铃',
      '注意保护肩部，避免受伤'
    ],
    '臀桥': [
      '避免过度拱起腰部',
      '收紧臀部肌肉，避免用腰部代偿',
      '控制动作节奏，避免过快',
      '呼吸要均匀，用力时呼气'
    ],
    '高抬腿': [
      '保持上身挺直，避免前倾',
      '落地时膝盖微屈以缓冲',
      '避免过度用力，控制动作幅度',
      '注意保持呼吸均匀'
    ],
    '开合跳': [
      '落地时膝盖微屈以缓冲',
      '避免过度用力，控制动作幅度',
      '保持上身稳定，避免过度摆动',
      '注意保持呼吸均匀'
    ]
  }
  
  return precautions[actionName] || ['请根据动作特点注意安全']
}

// 获取动作要领文本
const getActionInstructionsText = (actionName) => {
  const instructions = getActionInstructions(actionName);
  return instructions.join(' ');
}

// 获取注意事项文本
const getActionPrecautionsText = (actionName) => {
  const precautions = getActionPrecautions(actionName);
  return precautions.join(' ');
}

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里添加初始化逻辑
})
</script>

<style scoped>
.action-library {
  min-height: 100vh;
  background-color: #e8f5e9;
  padding: 0;
  font-size: 20px;
}

/* 主要内容区域 */
.library-main {
  display: grid;
  grid-template-columns: 1fr 5fr;
  gap: 25px;
  margin: 30px auto;
  padding: 0 30px;
  position: relative;
}

/* 左侧导航 */
.sidebar-nav {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  /* 设置固定定位，确保在滚动时保持可见 */
  position: sticky;
  top: 30px;
  /* 设置最小高度，使其与内容区域保持一致 */
  min-height: calc(100vh - 120px);
  height: fit-content;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 30px;
}

.nav-section:last-child {
  margin-bottom: 0;
}

.nav-title {
  color: #333;
  margin: 0 0 15px 0;
  font-size: 1.8rem;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 2px solid #a5d6a7;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-item {
  padding: 20px 25px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.5rem;
}

.nav-icon {
  width: 40px;
  height: 40px;
  font-size: 24px;
}

.nav-item:hover {
  background-color: #e8f5e9;
  color: #1b5e20;
}

.nav-item.active {
  background-color: #c8e6c9;
  color: #1b5e20;
  font-weight: bold;
  border-right: 3px solid #66bb6a;
}

/* 中间内容区域 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* 设置最小高度，使其与导航栏保持一致 */
  min-height: calc(100vh - 120px);
}

/* 动作展示区域 */
.actions-section {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  /* 设置flex为1，使其填充可用空间 */
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.banner-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #1b5e20;
  flex: 1;
}

.search-container {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 2000px;
}

.action-search {
  flex: 1;
  min-width: 300px;
}

.action-search :deep(.el-input__wrapper) {
  border-radius: 36px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 45px;
  border: 1px solid #a5d6a7;
}

.action-search :deep(.el-input__wrapper:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border: 1px solid #66bb6a;
}

.search-button {
  border-radius: 36px;
  background: linear-gradient(135deg, #4caf50, #81c784);
  color: white;
  border: 2px solid #4caf50;
  font-weight: bold;
  font-size: 1.2rem;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  padding: 12px 30px;
  height: 45px;
}

.search-button:hover {
  background: linear-gradient(135deg, #66bb6a, #4caf50);
  border: 2px solid #66bb6a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.action-count {
  color: #666;
  font-size: 1.2rem;
  flex-basis: 100%;
  text-align: right;
}

/* 动作网格视图 */
.actions-grid {
  display: grid;
  /* 修改为一行三个 */
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}

.action-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  border: 1px solid #eee;
}

.action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(165, 214, 167, 0.5);
  border-color: #a5d6a7;
}

.card-video {
  height: 200px;
  overflow: hidden;
}

.action-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.action-card:hover .action-video {
  transform: scale(1.05);
}

.card-content {
  padding: 20px;
}

.action-name {
  font-size: 1.7rem;
  color: #333;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.action-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.action-tag {
  margin: 0;
  border-radius: 12px;
}

.action-tag :deep(.el-tag__content) {
  font-weight: 500;
  font-size: 1.1rem;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.card-actions :deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
  font-size: 1.2rem;
  padding: 12px 24px;
}

.card-actions :deep(.el-button--primary) {
  background: linear-gradient(135deg, #4caf50, #81c784);
  border: none;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.5);
}

.card-actions :deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #66bb6a, #4caf50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6);
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #eee;
  /* 使用margin-top自动填充剩余空间 */
  margin-top: auto;
}

/* 图片占位符 */
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #999;
}

.loading-icon,
.error-icon {
  font-size: 2rem;
}

/* 动作详情侧边栏 */
.action-detail-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 450px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(135deg, #a5d6a7 0%, #80cbc4 100%);
}

.sidebar-header h2 {
  margin: 0;
  color: #1b5e20;
  font-size: 2rem;
  font-weight: 700;
}

.close-btn {
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #1b5e20;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.2rem;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 1);
}

.sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 25px;
  background-color: #f8fff8;
}

.detail-section {
  margin-bottom: 35px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.detail-section h3 {
  color: #1b5e20;
  margin: 0 0 15px 0;
  font-size: 1.6rem;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 2px solid #c8e6c9;
}

.muscle-group p {
  margin: 15px 0;
  color: #555;
  font-size: 1.2rem;
  line-height: 1.6;
}

.muscle-image-placeholder {
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.muscle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instruction-content ol,
.precautions-content ul {
  padding-left: 25px;
  margin: 0;
}

.instruction-content li,
.precautions-content li {
  margin-bottom: 12px;
  color: #555;
  line-height: 1.6;
  font-size: 1.2rem;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .actions-grid {
    /* 在中等屏幕下调整为一行两个 */
    grid-template-columns: repeat(2, 1fr);
  }
  
  .action-detail-sidebar {
    width: 400px;
  }
  
  .nav-item {
    font-size: 1.35rem;
  }
  
  .banner-title {
    font-size: 2.3rem;
  }
  
  .search-button {
    font-size: 1.1rem;
  }
  
  .action-name {
    font-size: 1.6rem;
  }
  
  .detail-section h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .library-main {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-container {
    width: 100%;
  }

  .action-search {
    flex: 1;
    width: auto;
  }

  .actions-grid {
    /* 在小屏幕下调整为一行一个 */
    grid-template-columns: 1fr;
  }

  .nav-item {
    padding: 12px 15px;
    font-size: 1.3rem;
  }

  .sidebar-nav {
    position: relative;
    top: 0;
  }
  
  .action-detail-sidebar {
    width: 100%;
  }
  
  .action-count {
    text-align: left;
  }
  
  .action-name {
    font-size: 1.5rem;
  }
  
  .detail-section h3 {
    font-size: 1.4rem;
  }
}
</style>